<template>
  <div>
    <h3 style="margin-left:45px;">个人信息 &nbsp;&nbsp;
      <i class="el-icon-edit" @click="dialogFormVisible = true"
         style="cursor:pointer;"></i>
    </h3>
    <ul>
      <li>性别:&nbsp;{{sex}}</li>
      <li>号码:&nbsp;
        <el-tag>{{phone}}</el-tag>
      </li>
      <li>昵称:&nbsp;{{nickname}}</li>
      <li>地址:&nbsp;<i style="font-size:15px;">{{address}}</i></li>
      <li>收货人:&nbsp;<span style="color:red;">{{receive}}</span>&nbsp;&nbsp;&nbsp;
        邮编:&nbsp;<el-tag>{{post}}</el-tag>
      </li>
      <li>
        购物车:
        <el-badge :value="100" :max="carsCount" class="item">
          <el-button type="success" circle @click="myCars()"><i class="el-icon-shopping-cart-2"/></el-button>
        </el-badge>
      </li>
      <li>
        我的订单:
        <el-button type="primary" circle @click="myOrder()"><i class="el-icon-shopping-bag-1"/></el-button>
      </li>
    </ul>

    <el-dialog title="编辑个人信息" :visible.sync="dialogFormVisible" style="margin-left:310px;">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" style="width:55%;">
        <el-form-item label="性别:" prop="sex">
          <el-select v-model="ruleForm.sex" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="号码(11位):" prop="phone">
          <el-input v-model="ruleForm.phone" placeholder="15801234567"></el-input>
        </el-form-item>
        <el-form-item label="昵称:" prop="nickname">
          <el-input v-model="ruleForm.nickname" placeholder="小张是小张"></el-input>
        </el-form-item>
        <el-form-item label="地址:" prop="address">
          <el-input v-model="ruleForm.address" placeholder="北京市"></el-input>
        </el-form-item>
        <el-form-item label="收货人:" prop="receive">
          <el-input v-model="ruleForm.receive" placeholder="张小伍"></el-input>
        </el-form-item>
        <el-form-item label="邮编(6位):" prop="post">
          <el-input v-model="ruleForm.post" placeholder="123456"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSubmit('ruleForm')">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import cookie from 'js-cookie'

  const axios = require('axios')
  export default {
    name: "Info",
    data() {
      return {
        infoData: null,
        sex: '',
        phone: '',
        address: '',
        nickname: '',
        receive: '',
        post: null,
        dialogFormVisible: false,
        carsCount: 0,
        ruleForm: {
          sex: '',
          phone: '',
          formLabelWidth: '120px',
          width: '120px'
        },
        rules: {
          sex: [{required: true, message: '性别不能为空', trigger: 'blur'}],
          phone: [{required: true, message: '电话不能为空', trigger: 'blur'}],
          nickname: [{required: true, message: '昵称不能为空', trigger: 'blur'}],
          address: [{required: true, message: '地址不能为空', trigger: 'blur'}],
          receive: [{required: true, message: '收货人不能为空', trigger: 'blur'}],
          post: [{required: true, message: '邮编不能为空', trigger: 'blur'}]
        },
        options: [{  // 性别
          value: 1,
          label: '男'
        }, {
          value: 0,
          label: '女'
        }],
      }
    },
    mounted() {
      this.getData() // 显示在 info 页面
      this.getDataDialog() // 回显到 edit 对话框中
      this.getCarsCount() // 购物车数量
    },
    methods: {
      getData() {
        const name = cookie.get('loginName')
        const _this = this
        axios.get('http://localhost:9000/personal/findByName/' + name).then(function (resp) {
          _this.infoData = resp.data.content
          if (resp.data.sex == 1) {
            _this.sex = '男'
          } else {
            _this.sex = '女'
          }
          _this.phone = resp.data.phone
          _this.address = resp.data.address
          _this.nickname = resp.data.nickname
          _this.receive = resp.data.receive
          _this.post = resp.data.post
        })
      },
      getDataDialog() { // 回显对话框
        const _this = this
        axios.get('http://localhost:9000/personal/findByName/' + cookie.get('loginName')).then(function (resp) {
          _this.ruleForm = resp.data
        })
      },
      myCars() {
        this.$router.push('/cars')
      },
      myOrder() {
        this.$message({
          message: '用户订单页面',
          type: 'success'
        })
      },
      editSubmit(formName) {
        const _this = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios.post('http://localhost:9000/personal/save', this.ruleForm).then(function (resp) {
              console.log(resp)
              if (resp.data == 'success') {
                _this.$message({
                  type: 'success',
                  message: '用户《' + cookie.get('loginName') + '》的信息已修改！'
                })
                window.location.reload()
              }
            });
          } else {
            return false;
          }
        })
      },
      getCarsCount() {
        var that = this
        axios.get('http://localhost:9000/cars/getCarsCount2/' + cookie.get('loginName')).then(function (resp) {
          that.carsCount = resp.data
        })
      }
    }
  }
</script>

<style scoped>
  ul li {
    list-style-type: none;
    font-size: 20px;
    margin: 15px;
    cursor: pointer;
  }
</style>
